<!DOCTYPE html>
<html　lang="en" xmlns:th="http://www.thymeleaf.org"　>

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/static/css/style.css"/>
    <link rel="stylesheet" href="/static/ydui/ydui.css"/>
    <!-- 引入YDUI自适应解决方案类库 -->
    <script src="/static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div class="register">
    <div class="register-form">
        <form name="register">
            <div class="item">
                <label>手机号</label>
                <input type="tel" id="mobile" class="reg-input" maxlength="11" placeholder="请输入手机号"/>
            </div>
            <div class="item">
                <label>验证码</label>
                <input type="tel" class="reg-input" id="smsCode" maxlength="6" placeholder="请输入验证码"/>
                <span class="getCode">获取验证码</span>
                <span class="reSent"><span id="timeSent">60</span>秒后重发</span>
            </div>
            <div class="item">
                <label>密码</label>
                <input type="password" class="reg-input" id="password" maxlength="18" placeholder="请输入密码"/>
            </div>
            <div class="item">
                <label>确认密码</label>
                <input type="password" class="reg-input" id="repeatPassword" maxlength="18"
                       placeholder="请再次输入密码"/>
            </div>
            <div class="item">
                <label>邀请码</label>
                <input type="text" id="inviteCode" class="reg-input" maxlength="10" placeholder="请输入邀请码"/>
            </div>
            <div class="reg">
                <div class="addchecked add_on" id="agree">
                    <input type="checkbox" class="addclass"/>
                </div>
                <label>
                    登录注册表示您同意
                    <a href="agreement?type=1">《用户协议》</a>和
                    <a href="agreement?type=2">《隐私政策》</a>
                </label>
            </div>
            <button type="button" class="register-btn">立即注册</button>
            <button type="button" class="register-btn1" style="display: none;">立即注册</button>
        </form>
    </div>
</div>
<script src="/static/js/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="/static/ydui/ydui.js"></script>
<script src="/static/ydui/flyme_ydui.js"></script>
<script type="text/javascript" th:inline="javascript">
			//重新发送
			$('.getCode').click(function() {
				if (!$("#mobile").val()){
					$yui.toast("手机号不能为空")
					//Toast("手机号不能为空",2000);
					return;
				}
				const reg = /^[1]([3-9])[0-9]{9}$/
				if ($("#mobile").val() && !reg.test($("#mobile").val())) {
					$yui.toast("请输入正确手机号")
					//Toast("请输入正确手机号",2000);
					return;
				}
				var _self = $(this);

				//倒计时开始
				var Otime = $('#timeSent')[0];
				var allTime = 60;

				function timeGo() {
					allTime -= 1;
					if(allTime == 0 || allTime < 0) {
						_self.next('.reSent').hide();
						_self.show();
						clearInterval(timer);
						$('#timeSent').text('60');
					} else {
						_self.hide()
						$('#timeSent').text(allTime);
					}
				}
				var timer=null;
				//　获取验证码
				$yui.loading('...')
				$.ajax({
					url:"../login/sms/code",
					type: 'POST',
					data:{phone:$("#mobile").val(),type:'1'},
					success:function(result){
					    $yui.loadingclose()
					    $yui.toast(result.msg)
						if (result.code==200){
							_self.hide();
							_self.next('.reSent').show();
							timer =setInterval(timeGo, 1000)
						}
					},
					complete:function(){
					console.log("请求结束");
						$yui.loadingclose()
					}});

			});
			//checked
			$(".addchecked").on("click", function() {
				$(this).toggleClass("add_on");
				if($(this).hasClass("add_on")){
					$('.register-btn').show();
					$('.register-btn1').hide();
				}else{
					$('.register-btn1').show();
					$('.register-btn').hide();
				}
			});

			//注册
			$('.register-btn').click(function() {
				if (!$("#mobile").val()){
					$yui.toast("手机号不能为空")
					return;
				}
				const reg = /^[1]([3-9])[0-9]{9}$/
				if ($("#mobile").val() && !reg.test($("#mobile").val())) {
					$yui.toast("请输入正确手机号")
					return;
				}
				if (!$("#smsCode").val()){
					$yui.toast("验证码不能为空")
					return;
				}
				if (!$("#password").val()){
					$yui.toast("密码不能为空")
					return;
				}
				const reg2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
				if ($("#password").val() !== '' && !reg2.test($("#password").val())) {
					$yui.toast("密码应该为6-18位字母、数字组合")
					//Toast("密码应该为6-18位字母、数字组合",2000);
					return;
				}
				if (!$("#repeatPassword").val()){
					$yui.toast("确认密码不能为空")
					return;
				}
				if ($("#repeatPassword").val() !== $("#password").val()){
					$yui.toast("两次密码输入不一致")
					return;
				}

				if (!$("#agree").hasClass("add_on")){
					$yui.toast("请先同意用户协议")
					return;
				}
				$yui.loading('...')
				var params = {
						phone:$("#mobile").val(),
						smsCode:$("#smsCode").val(),
						password:$("#password").val(),
						repeatPassword:$("#password").val(),
						inviteCode:$("#inviteCode").val()
					}
				$.ajax({
					url:"../login/register",
					type: 'POST',
					contentType : 'application/json; charset=utf-8',
					data: JSON.stringify(params),
					success:function(result){
						$yui.loadingclose()
						if (result.code==200){
							$yui.confirm({
								content:"恭喜您，注册成功！去下载App",
								ok:function(){
									location.href = "download";
								}
							})
						}else{
							$yui.toast(result.msg)
						}
						//$yui.toast(result.msg)

					},
					complete:function(){
						$yui.loadingclose()
					}
				});
			})


			function Toast(msg, duration) {
				duration = isNaN(duration) ? 3000 : duration;
				var m = document.createElement('div');
				m.innerHTML = msg;
				m.style.cssText = "font-family:siyuan;max-width:60%;min-width: 150px;padding:0 14px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
				document.body.appendChild(m);
				setTimeout(function() {
					var d = 0.5;
					m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
					m.style.opacity = '0';
					setTimeout(function() {
						document.body.removeChild(m)
					}, d * 1000);
				}, duration);
			}




</script>
</body>

</html>